<template>
  <div class="container clear-fix">
    <div class="header">
      <slot name="header"></slot>
      <bread-crumb-with-notice></bread-crumb-with-notice>
    </div>
    <div class="aside">
      <slot name="aside"></slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
  import BreadCrumbWithNotice from 'components/content/breadCrumb/BreadCrumbWithNotice'
  export default {
    name: "Container",
    components: {
      BreadCrumbWithNotice
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
  }
  .header {
    width: calc(100% - 200px);
    height: 60px;
    background-color: #ccc;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    transition: all 300ms;
  }

  .aside {
    width: 200px;
    height: 100%;
    background-color: #6d7ee9;
    box-shadow: 2px 2px 10px black;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 4;
    transition: all 300ms;
  }
  .footer {
    width: calc(100% - 200px);
    height: 60px;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #bbb;
    z-index: 3;
    transition: all 300ms;
  }
</style>